.scroll-table {
    width: 100%;
    height: 100%;
    overflow: auto;
    border: 1px solid #eee;
    .no-data{
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    thead,
    tr {
        width: 100%;
    }

    td,
    th {
        border: none;
        text-align: left;
        padding: 8px;
        box-sizing: border-box;
    }

    th {
        z-index: 1000;
        background-color: #f8f8f9;
    }

    table {
        table-layout: fixed;
        width: 100%;
    }

    .th-fixed-left,
    .td-fixed-left,
    .th-fixed-right,
    .td-fixed-right {
        position: sticky;
        z-index: 1001;
        background-color: #fff;

        &::after {
            content: '';
            position: absolute;
            top: 0px;
            width: 10px;
            bottom: -1px;
            overflow-x: hidden;
            overflow-y: hidden;
            touch-action: none;
            pointer-events: none;
            box-shadow: none;
        }
    }

    .th-fixed-left,
    .td-fixed-left {
        left: 0;
        border-right: 1px solid #eee;
        border-right: none;
    }

    .th-fixed-right,
    .td-fixed-right {
        right: 0;
        border-left: 1px solid #eee;
        border-right: none;
    }

    tbody tr:last-child td {
        border-bottom: 1px solid #eee;
    }

    thead tr th {
        position: sticky;
        top: 0;
        border-left: 1px solid #eee;
        border-bottom: 1px solid #eee;

        &:first-child {
            border-left: none;
        }
    }

    tbody tr td {
        border-left: 1px solid #eee;
        border-bottom: 1px solid #eee;

        &:first-child {
            border-left: none;
        }
    }

    .th-fixed-right,
    .th-fixed-left {
        z-index: 1002;
        background-color: #f8f8f9;
    }
}

.is-scroll-left {
    .th-fixed-right,
    .td-fixed-right {
        &::after {
            left: -10px;
            box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
        }
    }
}

.is-scroll-right {
    .th-fixed-left,
    .td-fixed-left {
        &::after {
            right: -10px;
            box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
        }
    }
}

.is-scroll-middle {
    .th-fixed-left,
    .td-fixed-left {
        &::after {
            right: -10px;
            box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
        }
    }

    .th-fixed-right,
    .td-fixed-right {
        &::after {
            left: -10px;
            box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
        }
    }
}
